<!DOCTYPE html>

<html class="no-js css-menubar" lang="zh-cn">

<head>
	<title>抽签结果列表</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 移动设备 viewport -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

	<!-- 样式 -->
	<link rel="stylesheet" href="../public/themes/classic/global/css/bootstrap.css">
	<link rel="stylesheet" href="../public/fonts/font-awesome/font-awesome.css">
	<link rel="stylesheet" href="../public/fonts/web-icons/web-icons.css">
	<link rel="stylesheet" href="../public/themes/classic/base/css/site.css" id="admui-siteStyle">
	<link rel="stylesheet" href="../public/vendor/dataTables-bootstrap/dataTables.bootstrap.css">
	<link rel="stylesheet" href="../public/vendor/datatables-responsive/dataTables.responsive.css" />

	<script src="../public/vendor/jquery/jquery.min.js"></script>
	<script src="../js/common.js"></script>
	<script src="../public/vendor/vue/vue.min.js"></script>
	<script src="../public/vendor/bootstrap/bootstrap.min.js"></script>
	<!--layer弹窗-->
	<script src="../public/vendor/layer/layer.js"></script>
</head>

<body class="layout-full">
<div class="page animation-fade page-blank" id="app">
	<div class="page-content">
		<div class="panel">
			<div class="panel-heading">
			</div>
			<div class="panel-body padding-top-10">
				<div class="col-xs-12">
					<form class="form-inline pull-right" id="search-form">
						<div class="form-group">
							<input class="form-control input-sm" id="idNumber" name="idNumber" placeholder="证件号码" autocomplete="off" type="text">
						</div> 
						<div class="form-group">
							<input class="form-control input-sm" id="userName" name="userName" placeholder="用户名" autocomplete="off" type="text">
						</div>
						<div class="form-group">
							<button type="button" class="btn btn-primary btn-sm" onclick="search(true)"><i class="fa fa-search" aria-hidden="true"></i> 搜索</button>
							<button type="reset" class="btn btn-primary btn-sm" >重置</button>

						</div>
						<div class="form-group">
							<button type="button" class="btn btn-icon btn-primary btn-sm" onclick="exportExcel()">
								导出抽签结果
							</button>
						</div>
					</form>
				</div>
				<div class="col-xs-12">
					<table class="table table-bordered table-hover dataTable table-striped width-full" id="dataTable">
						<thead>
						<tr>
							<th></th>
							<th>ID</th>
							<th>用户姓名</th>
							<th>抽签编号</th>
							<th>证件号码</th>
							<th>楼栋</th>
							<th>楼层</th>
							<th>房号</th>
							<th>房屋类型</th>
							<th>建筑面积(㎡)</th>
							<th>套内面积(㎡)</th>
							<th>房屋分配状态</th>
						</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>

</div>

<script src="../public/vendor/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../public/vendor/dataTables/jquery.dataTables.js"></script>
<script src="../public/vendor/dataTables/dataTables.bootstrap.js"></script>
<script src="../public/vendor/dataTables-responsive/dataTables.responsive.min.js"></script>
<script src="../public/themes/classic/base/js/app.js"></script>
<!--laydate日期-->
<script src="../public/vendor/laydate/laydate.js"></script>
<!-- jQuery上传插件 -->
<script src="../public/vendor/ajaxfileupload/ajaxfileupload.js"></script>

<!--{表格必须组件}初始化表格，请放在最后引用-->
<script src="../js/table.js"></script>
<script>
		var vm = new Vue({
			el: '#app',
			data: {
				search: {

				},
				uoloadText: '请选择文件' // excel上传按钮显示的文字
			},
			methods: {
				/**
				 * 重置搜索栏
				 * @returns
				 */
				reset: function() {

				},
				initTable() {
					// 表格数据请求地址
					var ajaxUrl = baseURL + 'api/group/detail/list';
					// 配置表头
					var arr = [{
								"data": "userName"
							}, {
								"data": "userNo"
							}, {
								"data": "idNumber"
							}, {
								"data": "address"
							},  {
								"data": "floor"
							}, {
								"data": "roomNo"
							}, {
								"data": "houseType",
								"render": function(data, type, row) {
									if (data == 0) {
										return "普通房";
									}
									return "职工房"
								}
							}, {
								"data": "areaSpace"
							}, {
								"data": "roomSpace"
							},
							{
								"data": 'status',
								"render": function(data, type, row) {
									if (data == 0) {
										return "未分配";
									}
									return "已分配"
								}
							}
						]
					// 初始化表格
					TABLE.init(ajaxUrl, arr);
				}
			},
			mounted() {
				this.initTable();
			}
		})

		/**
		 * 导出excel
		 * @returns
		 */
		function exportExcel() {
			window.open(baseURL + "/api/group/excel/downExcel");
		}

	</script>

</body>

</html>